<template>
  <div>
    <div class="top-box">
        <div class="top">
            <div>
                <span @click="back()"><img src="/image/Mine/zjt.png" alt=""></span>
                <p class="p1">我的地址</p>
                <p class="p2"><img src="/image/Mine/fx.png" alt=""></p> 
            </div>
        </div>  
    </div>
    <div class="content">
        <div class="box" v-for="(v,i) in arr" :key="i">
            <div class="tutu">
                <img :src="v.img" alt="">
            </div>
            <div class="txtx">
                <h4>{{v.title}}</h4>
                <p>{{v.txtx}}<span>{{v.km}}km</span></p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[
                {img:"/image/Mine/md_01.png",title:"盒马鲜生西安兰岛店",txtx:"西安市雁塔区广场科技路4号B1层",km:"2.3"},
                {img:"/image/Mine/md_02.png",title:"盒马鲜生西安大都荟店",txtx:"西安市雁塔区广场科技路305号高新大都荟1层",km:"2.7"},
                {img:"/image/Mine/md_03.png",title:"盒马鲜生西安太白店",txtx:"陕西省西安市碑林区太白印象城B1层",km:"4.6"},
                {img:"/image/Mine/md_01.png",title:"盒马鲜生西安澳堡时代店",txtx:"长安区西长安街555号",km:"7.8"},
            ]
        }
    },
    methods:{
        back(){
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
.top-box{
    width: 100%;
    height: 0.38rem;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    background-color: white;
    border-bottom: 0.01rem solid #f2f2f2;
}
.top{
    width: 93%;
    height: 0.38rem;
}
.top div{
    width: 100%;
    height: 0.38rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.top div span,.top div span img{
    width: 0.2rem;
    height: 0.2rem;
}
.top div .p1{
    font-size: 0.16rem;
}
.top div .p2{
    font-size: 0.14rem;
    color: #4abcfb;
}
.top div .p2 img{
    width: 0.18rem;
    height: .2rem;
}
.content{
    background-color: #f2f2f2;
    width: 100%;
    margin-top: 0.53rem;
}
.content .box{
    background-color: #ffffff;
    margin-top: 0.15rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.content .tutu,.content .tutu img{
    width: 100%;
    height: 2.20rem;
}
.content .txtx{
    width: 93%;
}
.content .txtx h4{
    margin: 0.12rem 0 0.06rem 0;
    font-size: 0.14rem;
}
.content .txtx p{
    display: flex;
    justify-content: space-between;
    color: #858585;
    font-size: 0.11rem;
    margin-bottom: 0.06rem;
}
</style>